<!-- 主视图页面 -->
<template>
	<div v-cloak>
		<a-layout id="components-layout-demo-custom-trigger">
			<!-- 侧边布局 -->
			<a-layout-sider v-model="collapsed" :trigger="null" collapsible width="256px">
				<div class="header">
					<img class="icon-Img" src="../assets/logo.png" />
					<div class="h1">云一就餐</div>
				</div>
				
				<a-menu theme="dark" mode="inline" v-model="slideBar.active" @select="slideSelect">
					<a-menu-item v-if="slideBar" class="slider" v-for="(item,index) in slideBar.list"
						:key="index|numToString">
						<a-icon :type="item.icon" class="icon-font" />
						<span>{{item.name}}</span>
					</a-menu-item>
				</a-menu>
			</a-layout-sider>
			<a-layout>
				<!-- 顶部核心导航 -->
				<a-layout-header class="main-header">
					<a-icon class="trigger" :type="collapsed ? 'menu-unfold' : 'menu-fold'"
						@click="() => (collapsed = !collapsed)" />
					<!-- 主界面图标导航 -->
					<div class="main-header-right">
						<!-- <div class="main-header-right-item">
							<a-icon type="search" class="icon-font" />
						</div>
						<div class="main-header-right-item">
							<a-icon type="bell" class="icon-font" />
						</div> -->
						<div class="">
							<a-avatar :src="user.avatar||''" size="small" icon="user" />
							{{user.name}}
						</div>
					</div>
				</a-layout-header>
				<a-spin tip="Loading..." :spinning="loading">
					<a-layout-content>
						<a-breadcrumb class="breadcrumb">
							<a-breadcrumb-item v-for="(item,index) in bran" :key="index">
								{{item.title}}
							</a-breadcrumb-item>
						</a-breadcrumb>
						<router-view></router-view>
						<!-- <div v-if="slideBar.active[0]!='0'">
							<a-breadcrumb class="breadcrumb">
								<a-breadcrumb-item v-for="(item,index) in bran" :key="index">
									{{item.title}}
								</a-breadcrumb-item>
							</a-breadcrumb>
						</div>
						<div :class="slideBar.active[0]=='0'?'main':''">
							<router-view></router-view>
						</div> -->
						<!-- 主内容 -->
					</a-layout-content>
				</a-spin>
			</a-layout>
		</a-layout>
	</div>
</template>

<script>
	import common from "@/common/mixins/common.js"
	import {
		mapState
	} from 'vuex'
	export default {
		//混入
		mixins: [common],
		provide() {
			return {
				layout: this
			}
		},
		data() {
			return {
				collapsed: false,
				slideBar: [],
				bran: [],
				loading: false,
			};
		},
		created() {
			// 初始化菜单
			this.slideBar = this.$conf.slideBar;
			// 获取面包屑导航
			this.getRouterBran();
			// 初始化选中菜单
			this.init_sliderBar();
		},
		watch: {
			'$route'(to, from) {
				// 本地存储
				localStorage.setItem('sliderActive', JSON.stringify({
					left: this.slideBar.active[0] || '0'
				}));
				this.getRouterBran();
			}
		},
		computed: {
			...mapState({
				user: state => state.user.user,
			}),
		},
		methods: {
			// 显示loading
			showLoading() {
				this.loading = true
			},
			// 隐藏loading
			hideLoading() {
				this.loading = false
			},
			// 初始化选中菜单
			init_sliderBar() {
				//有本地存储历史记录的话跳记录页面。
				let r = localStorage.getItem('sliderActive');
				if (r) {
					r = JSON.parse(r)
					this.slideBar.active[0] = r.left;
					// 拿到本地存储跳转到指定界面
					// 跳转到指定页面
					this.$router.push({
						name: this.slideBar.list[r.left].pathname
					});
				} else {
					//无本地存储的跳首页。
					this.slideBar.active[0] = '0';
					this.$router.push({
						name: this.slideBar.list[0].pathname
					})
				}
			},
			// 获取面包屑导航
			getRouterBran() {
				let b = this.$route.matched.filter(v => v.name)
				let arr = []
				b.forEach((v, k) => {
					// 过滤layout
					if (v.name === 'layout') return
					arr.push({
						name: v.name,
						path: v.path,
						title: v.meta.title
					})
					// 过滤layout和index
					// if (v.name === 'index' || v.name === 'layout') return
					// arr.push({
					// 	name: v.name,
					// 	path: v.path,
					// 	title: v.meta.title
					// })
				})
				// if (arr.length > 0) {
				// 	arr.unshift({
				// 		name: 'index',
				// 		path: '/index',
				// 		title: '数据面板'
				// 	})
				// }
				this.bran = arr;
			},
			// 左侧列表点击选择方法
			slideSelect(key, keyPath) {
				let index = parseInt(key.key);
				// 跳转到指定页面
				this.$router.push({
					name: this.slideBar.list[index].pathname
				})
			},
		}
	};
</script>

<style>
	[v-cloak] {
		display: none;
	}

	#components-layout-demo-custom-trigger {
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		right: 0;
		overflow: hidden;
	}

	#components-layout-demo-custom-trigger .trigger {
		font-size: 20px;
		line-height: 65px;
		cursor: pointer;
		transition: color 0.3s;
	}

	#components-layout-demo-custom-trigger .trigger:hover {
		color: #1890ff;
	}

	.header {
		height: 65px;
		line-height: 65px;
		background-color: #002140;
		display: flex;
		align-items: center;
		position: relative;
        padding-left: 24px;
		-webkit-transition: all .3s;
		transition: all .3s;
		overflow: hidden;
	}

	/* 图片图标 */
	.icon-Img {
		/* margin: 16px 0 17px 24px; */
		width: 32px;
	}
	.h1{
		color: #FFFFFF;
        font-size: 20px;
        margin: 0 0 0 0.857142rem;
        font-weight: 600;
		overflow:hidden;
		white-space:nowrap;  
	}
	/* 文字图标 */
	.icon-font {
		font-size: 20px;
	}

	.slider {
		display: flex;
		align-items: center;
		margin-left: 24px;
		/* font-size: 14px !important; */
	}

	/* 主布局头 */
	.main-header {
		z-index: 99;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 1.571428rem 0 1.857142rem;
		background-color: #FFFFFF;
	}

	/* 主布局头右布局 */
	.main-header-right {
		display: flex;
		align-items: center;
	}

	.main-header-right-item {
		margin-right: 25px;
	}

	.main {
		margin: 24px 12px;
		/* background: #fff; */
		minHeight: '280px'
	}

	/* 面包屑导航 */
	.breadcrumb {
		margin-top: 3px;
		padding: 0 32px;
		/* font-size:15px; */
		height: 40px;
		line-height: 40px;
		text-align: left;
		background-color: #FFFFFF;
	}
</style>
